<template>
    <div id="ag-grid">
        <ag-grid-vue
                style="height: 600px"
                class="table ag-theme-balham"
                :columnDefs="columns"
                :rowData="rowData"
                :enableColResize="true"
                :gridReady="onGridReady"
                @cellClicked="onCellClicked"
        ></ag-grid-vue>
    </div>
</template>

<script>
    import 'ag-grid-community/dist/styles/ag-grid.css';
    import 'ag-grid-community/dist/styles/ag-theme-balham.css';
    //引入ag-grid-vue
    import { AgGridVue } from 'ag-grid-vue';
    export default {
        name: "AgGrid",
        components: {
            AgGridVue,
        },
        props: {
            columns: {
                type: Array,
                default: [
                    {headerName: '名称', field: 'title', width: 70},
                    {headerName: '区域', field: 'url', width: 70},
                    {headerName: '行政主管', field: 'url', width: 70},
                    {headerName: '接待团数', field: 'url', width: 70},
                    {headerName: '接待人数', field: 'url', width: 70},
                    {headerName: '出行团政', field: 'url', width: 70},
                    {headerName: '出行人数', field: 'url', width: 70},
                    {headerName: '预定团数', field: 'url', width: 70},
                    {headerName: '备注', field: 'url', width: 70},
                ]
            },
            rowData: {
                type: Array,
                default: [
                    {title: '谷歌', url: 'www.google', catalog: '搜索引擎',pr:10},
                    {title: '微软', url: 'www.microsoft.com', catalog: '操作系',pr:10},
                    {title: 'ITXST', url: 'www.itxst.com', catalog: '小站',pr:1},
                    {title: '淘宝', url: 'www.taobao.com', catalog: '电商',pr:8}
                ]
            }
        },
        methods: {
            //ag-grid创建完成后执行的事件
            onGridReady (params) {
                console.log(params);
                // 获取gridApi
                this.gridApi = params.api;
                this.columnApi = params.columnApi;
                // 这时就可以通过gridApi调用ag-grid的传统方法了
                this.gridApi.sizeColumnsToFit();
            },
            //单元格点击事件
            onCellClicked (cell) {
                console.log(cell);
                // 获取选中单元格的数据
                console.log(cell.value);
                // 获取选中单元格所在行号
                console.log(cell.rowIndex);
                // 获取选中单元格所在行的数据
                console.log(cell.data);
            }
        }
    }
</script>

<style scoped>
    #ag-grid{
        width: 1420px;
    }
</style>
